<template>
    <div class="verify-code" :class="sending ? 'disabled' : ''" @click="getCode">
        {{text}}
    </div>
</template>

<script type="text/ecmascript-6">
    import { is } from '../../utils/util';

    export default {
        props: {
            total: {
                type: Number,
                default: 60
            },
            interval: {
                type: Number,
                default: 1000
            },
            label: String,
            title: String,
            message: String,
            codeType: String,
            account: String,
            options: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        data() {
            return {
                text: this.label,
                sending: false,
                access_token: null
            }
        },
        methods: {
            random() {
                return Math.random().toString(36).substr(2, 24);
            },
            getCode() {
                if (this.sending) return;

                this.sending = true;
                this.text = this.title;
                this.access_token = this.random();
                this.$parent.sms_token = this.access_token;

                var fn;

                switch (this.codeType) {
                    case '1':
                    default:
                        fn = this.getLoginCode;
                        break;
                }

                fn(() => {
                    var total = this.total;
                    this.text = this.message.replace(/\<%counter%\>/g, total);

                    var timer = setInterval(() => {
                        total--;
                        this.text = this.message.replace(/\<%counter%\>/g, total);

                        if (total < 1) {
                            this.text = this.label;
                            this.sending = false;
                            clearInterval(timer);
                        }
                    }, this.interval);
                }, () => {
                    this.text = this.label;
                    this.sending = false;
                });
            },
            // fast login
            getLoginCode(resolve, reject) {
                var message = null;

                if (!is.has(this.account)) {
                    message = '请输入您的手机号';
                } else if (!is.mobile(this.account)) {
                    message = '手机号格式不正确，请重新输入';
                }

                if (message) {
//                    this.
//                    this.$Alert(message, () => reject());
                  return this.$Modal.info({title:"消息提示",body:message,onOk:()=>reject(),onCancle:()=>reject()});

                }
                EventBus.$http
                        .post(EventBus.$Config.baseUrl + 'api/sms/verify-code', {
                            mobile: this.account,
                            access_token: this.access_token
                        })
                        .then(res => {
                            var result = res.data;

                            if (result.success) {
                                resolve();
                            } else {
                              this.$Modal.info({title:"消息提示",body:res.data.message,onOk:()=>reject(),onCancle:()=>reject()});
//                                this.$Alert(result.message, () => {
//                                    reject();
//                                });
                            }
                        }, res => {
//                            this.$Alert('获取验证码失败', () => {
//                                reject();
//                            });
                          this.$Modal.info({title:"消息提示",body:"获取验证码失败",onOk:()=>reject(),onCancle:()=>reject()});
                        });
            }
        }
    }
</script>

<style rel="stylesheet/less" lang="less" scoped>
    .verify-code {
        width: 100px;
        background-color: #515456;
        text-align: center;
        color: #fff;
        font-size: 12px;
        height: 44px;
        line-height: 44px;
        display: inline-block;
        cursor: pointer;
    }

    .verify-code.disabled {
        cursor: default;
        opacity: .7;
    }
</style>
